<template>
	<view class="my-content">
		<u-card margin="0" :show-head="false">
			<view slot="body">
				<view class="u-margin-bottom-20">{{$t("回执表单")}}</view>
				<u-button type="primary" :custom-style="btnActiveStyle" hover-class="none" @click="download">
					<view class="u-flex u-row-between" style="width: 100%;">
						<view>
							文件名称.XLS
						</view>
						<view>
							<u-icon name="download" size="34"></u-icon>
						</view>
					</view>
				</u-button>
				<view class="u-margin-top-20 infoText">
					{{$t("完整报告已传输至邮箱，请注意查收")}}
				</view>
			</view>
		</u-card>


		<view style="margin: 0 -10rpx;margin-top: 20rpx;margin-bottom: 20rpx;">
			<u-row gutter="20" align="top">
				<u-col span="6">
					<u-card class="charts" margin="0" :show-head="false">
						<view slot="body">
							<view class="chartsTitle u-font-24">{{type === '1' ? $t("接通率"):$t("转化率")}}</view>
							<view style="height: 255rpx;">
								<qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData" />
							</view>
						</view>
					</u-card>
				</u-col>
				<u-col span="6">
					<u-col span="12">
						<u-card class="charts" margin="0" :show-head="false">
							<view slot="body">
								<view class="chartsTitle u-font-24">{{type === '1' ? $t("总计呼出"):$t("达成合作")}}</view>
								<view class="number u-flex">
									<view class="bigNumber">1000</view>
									<view>{{type === '1' ? $t("次") : $t("位")}}</view>
								</view>
							</view>
						</u-card>
					</u-col>
					<u-col span="12">
						<view class="u-margin-top-20">
							<u-card class="charts" margin="0" :show-head="false">
								<view slot="body">
									<view class="chartsTitle u-font-24">{{type === '1' ? $t("累计通话时长") : $t("总计呼出")}}
									</view>
									<view class="number u-flex">
										<view class="bigNumber">1000</view>
										<view>{{type === '1' ? $t("分钟") : $t("次")}}</view>
									</view>
								</view>
							</u-card>
						</view>
					</u-col>
				</u-col>
			</u-row>
		</view>


		<u-card margin="0" :show-head="false">
			<view slot="body">
				<view class="u-margin-bottom-20">{{$t("通话时长")}}</view>
				<view style="height: 290rpx;">
					<qiun-data-charts type="column" :opts="optsBar" :chartData="chartDataBar" />
				</view>
			</view>
		</u-card>

		<view class="u-margin-top-20">
			<u-row gutter="20" style="margin: 0 -10rpx;">
				 <!-- v-if="type === 1" -->
				<u-col span="4" v-if="type === '1'">
					<u-card class="charts" margin="0" :show-head="false">
						<view slot="body">
							<view class="chartsTitle u-font-24">{{$t("有效号码")}}</view>
							<view class="number u-flex">
								<view class="bigNumber">100</view>
								<view>{{$t("个")}}</view>
							</view>
						</view>
					</u-card>
				</u-col>
				<u-col span="4" v-if="type === '1'">
					<u-card class="charts" margin="0" :show-head="false">
						<view slot="body">
							<view class="chartsTitle u-font-24">{{$t("成功获客")}}</view>
							<view class="number u-flex">
								<view class="bigNumber">50</view>
								<view>{{$t("位")}}</view>
							</view>
						</view>
					</u-card>
				</u-col>
				<u-col span="4" v-if="type === '1'">
					<u-card class="charts" margin="0" :show-head="false">
						<view slot="body">
							<view class="chartsTitle u-font-24">{{$t("潜在客户")}}</view>
							<view class="number u-flex">
								<view class="bigNumber">100</view>
								<view>{{$t("位")}}</view>
							</view>
						</view>
					</u-card>
				</u-col>
				<u-col span="4" v-if="type === '2'">
					<u-card class="charts" margin="0" :show-head="false">
						<view slot="body">
							<view class="chartsTitle u-font-24">{{$t("平均时长")}}</view>
							<view class="number u-flex">
								<view class="bigNumber">100</view>
								<view>{{$t("分")}}</view>
							</view>
						</view>
					</u-card>
				</u-col>
				<u-col span="4" v-if="type === '2'">
					<u-card class="charts" margin="0" :show-head="false">
						<view slot="body">
							<view class="chartsTitle u-font-24">{{$t("累计通话时长")}}</view>
							<view class="number u-flex">
								<view class="bigNumber">100</view>
								<view>{{$t("分")}}</view>
							</view>
						</view>
					</u-card>
				</u-col>
			</u-row>
		</view>

	</view>
</template>

<script>
	export default {
		onLoad({
			id
		}) {
			console.log(id);
			this.getChartData();
		},
		data() {
			return {
				type: '1', //1 批量拜访 2 商务洽谈
				btnActiveStyle: {
					background: '#ffeee7',
					'border-radius': '5rpx',
					color: '#ff7348',
					height: '70rpx',
					'font-size': '26rpx'
				},
				chartData: {},
				opts: {
					color: ["#ff6908"],
					padding: undefined,
					title: {
						name: "80%",
						fontSize: 22,
						color: "#000"
					},
					subtitle: null,
					extra: {
						arcbar: {
							type: "circle",
							width: 20,
							backgroundColor: "#E9E9E9",
							startAngle: 1.5,
							endAngle: 0.25,
							gap: 2,
							linearType: "custom",
							customColor: ["#ffad4c"],
						}
					},
				},
				chartDataBar: {},
				optsBar: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					enableScroll: false,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						data: [{
							min: 0,
							tofix: 1
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 20,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				},
			};
		},
		methods: {
			//下载文件
			download() {},
			getChartData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							name: "正确率",
							data: 0.8
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));



					let resbar = {
						categories: ["0-30s", "30s-1min", "1min-3min", ">3min"],
						series: [{
							name: "目标值",
							data: [35, 36, 31, 33]
						}]
					};
					this.chartDataBar = JSON.parse(JSON.stringify(resbar));
				}, 500);
			},
		}
	}
</script>
<style lang="scss" scoped>
	.my-content {
		background-color: #f6f6f6;
		height: auto;
		min-height: 100%;
		padding: 20rpx 30rpx;

		.infoText {
			color: #aaa;
			font-size: 24rpx;
		}

		.charts {
			.chartsTitle {
				font-weight: 800;
				font-size: 26rpx;
			}

			.number {
				align-items: end;
				color: #ff7348;

				.bigNumber {
					font-size: 55rpx;
					font-weight: 800;
					margin-right: 8rpx;
					transform: translateY(12rpx);
				}
			}
		}
	}
</style>